import { uiEditorModel } from '../model/ui-editor-model'
import s from './UITools.module.less'
import itemStyle from '../UIItem.module.less'

export function ItemId(props: { id: string }) {
  return (
    <span
      className={s.uiToolsBoxId}
      title={props.id}
      onClick={() => {
        uiEditorModel.setSelectedItem(props.id)
      }}
      onMouseEnter={() => {
        const e = document.getElementById(props.id)
        e?.classList.add(itemStyle.hover)
      }}
      onMouseLeave={() => {
        const e = document.getElementById(props.id)
        e?.classList.remove(itemStyle.hover)
      }}
    >
      {props.id}
    </span>
  )
}
